<style lang="less">
.business-wrap .el-tree .el-tree-node__expand-icon.el-icon-caret-right:after {
  width: 10px;
  left: -6px;
}
.custom-tree-node {
  position: relative;
  color: #bfdff7;
  .icon-play {
    position: absolute;
    left: 5px;
    top: 9px;
    font-size: 8px;
    display: none;
  }
  .icon-video {
    margin-right: 5px;
  }
  &.active {
    color: #00e7ff;
    .icon-play {
      display: inline;
      color: #00e7ff;
    }
  }
  .none {
    color: #aaa;
  }
}
</style>
<template>
  <div class="page-census page-setting">
    <div class="crumbs">
      <router-link to="/">首页</router-link> / 一企一档 /
      <span class="active">可视视频</span>
    </div>
    <el-container :style="{ height: mainH + 'px' }">
      <el-aside class="setting-nav-wrap" width="300px" style="padding: 20px">
        <div class="unit-search flex" v-if="siteInfos.userType == 1">
          <el-input
            class="flex-1"
            placeholder="请输入关键字"
            v-model.trim="keyword"
          ></el-input>
        </div>
        <h1 class="fs-16 mt-10">企业列表</h1>
        <div
          class="business-wrap"
          :style="{ height: mainH - 110 + 'px', overflow: 'auto' }"
        >
          <el-tree
            ref="tree"
            :props="props"
            :load="loadNode"
            :default-expanded-keys="defaultExpandedKeys"
            node-key="id"
            lazy
            @node-click="handleNodeClick"
            :render-content="renderContent"
            :filter-node-method="filterNode"
          >
          </el-tree>
        </div>
      </el-aside>
      <el-main ref="rightBlk" class="setting-main">
        <screenVideoPlayer
          ref="screenVideoPlayerRef"
          @listChange="onPlayingListChange"
          @getType="getType"
        ></screenVideoPlayer>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import screenVideoPlayer from "@/components/screenVideoPlayer/screen";
import { mapState } from "vuex";
export default {
  name: "Notice",
  components: {
    screenVideoPlayer,
  },
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  // <!-- 1 电气火灾 2 消防用水 3 烟感 4 可燃气体 5 火灾自动联网 6 消防可视化 -->
  data() {
    return {
      keyword: "",
      businessId: this.$route.query.id,
      businessName: this.$route.query.name,
      deviceList: [],
      currentWinId: 0,
      totalWin: 25,
      props: {
        label: "name",
        children: "cameras",
        isLeaf: "leaf",
      },

      playerOptions: null,
      playingList: [],
      node_had: [], // 触发 tree 的 :load=loadNode 重复触发 动态更新tree
      resolve_had: [], // 触发 tree 的 :load=loadNode 重复触发 动态更新tree
      timer: null, // 用于存储setTimeout的返回值
      productId: "",
      videoParams:{}
    };
  },
  computed: {
    ...mapState(["siteInfos"]),
    mainH() {
      return this.winH - 180;
    },
    defaultExpandedKeys() {
      if (this.siteInfos.userType == 1) {
        return [];
      }
      return [this.siteInfos.homeId];
    },
  },
  watch: {
    keyword(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    startTimer() {
      this.timer = setTimeout(() => {
        // 五分钟后执行的代码，这里关闭页面
        this.$router.go(-1);
      }, 5 * 60 * 1000); // 5分钟 = 5 * 60 * 1000毫秒
    },
    // 清除定时器
    clearTimer() {
      clearTimeout(this.timer);
      this.timer = null;
    },
    // 监听鼠标移动事件，重置定时器
    resetTimer() {
      this.clearTimer(); // 清除之前的定时器
      this.startTimer(); // 启动新的定时器
    },
    getType() {
      this.loadNode(this.node_had, this.resolve_had);
    },
    onPlayingListChange(list) {
      this.playingList = list;
      // const map = new Map();
      // const newArr = this.$refs.screenVideoPlayerRef.playerOptions.filter(
      //   (key) => !map.has(key.videoNumber) && map.set(key.videoNumber, 1)
      // );
      // this.$refs.screenVideoPlayerRef.playerOptions = newArr;
    },
    renderContent(h, { node, data, store }) {
      if (!data.productId) {
        if (data.type == "none") {
          return (
            <span class="custom-tree-node">
              <span class="none">{data.name}</span>
            </span>
          );
        } else {
          return (
            <span class="custom-tree-node">
              <span>{data.name}</span>
            </span>
          );
        }
      } else {
        if (this.playingList.indexOf(data.number) >= 0) {
          return (
            <span class="custom-tree-node active">
              <i class="iconfont icon-video"></i>
              <i class="iconfont icon-play"></i>
              <span>{data.name}</span>
            </span>
          );
        }
        return (
          <span class="custom-tree-node">
            <i class="iconfont icon-video"></i>
            <i class="iconfont icon-play"></i>
            <span>{data.name}</span>
          </span>
        );
      }
    },
    getData(cbk) {
      this.loading = true;
      if (this.siteInfos.userType != 1) {
        cbk &&
          cbk([{ name: this.siteInfos.homeName, id: this.siteInfos.homeId }]);
        return;
      }
      this.$get("/business/business/businessList").then(
        (res) => {
          this.loading = false;
          let list = res.data.filter((item) => item.cameraType == 1);
          cbk && cbk(list);
        },
        (err) => {
          this.loading = false;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getDevice(businessId, cbk) {
      this.$get("/fireFightingIOT/device/deviceCameraList", {
        businessId: businessId,
      }).then(
        (res) => {
          let deviceList = res.data.map((item) => {
            item.isActive = false;
            item.leaf = true;
            return item;
          });

          cbk && cbk(deviceList);
        },
        (err) => {
          this.loading = false;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getData((list) => {
          resolve(list);
        });
      } else if (node.level > 0) {
        this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
        this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
        this.getDevice(node.data.id, (list) => {
          if (list.length == 0) {
            resolve([{ name: "暂无设备", leaf: true, type: "none" }]);
          } else {
            resolve(list);
          }
        });
      }
    },
    handleNodeClick(data) {
      if (data.type == "none" || !data.number || data.isActive) {
        return;
      }
      this.$get("/fireFightingIOT/device/getVideoPlayTime", {
        number: data.number,
      })
        .then((res) => {
          if (res.code == 0) {
            this.startPreview(data);
            data.isActive = true;
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },

    startPreview(data) {
      if (data.videoplayAddr) {
        this.$refs.screenVideoPlayerRef.play({
          url: data.videoplayAddr,
          type: data.playType,
          number: data.number,
          name: data.name,
        });
      } else {
        this.$get("/fireFightingIOT/device/getVideoStream", {
          number: data.number,
        })
          .then((res) => {
            this.productId = data.productId;
            this.$refs.screenVideoPlayerRef.play({
              url: res.data,
              type: data.playType,
              number: data.number,
              name: data.name,
              productId: data.productId,
            });
          })
          .catch((err) => {
            this.$message.error(err.msg || "系统错误");
          });
      }
    },
    getVideoAddr(number) {
      this.$get("/fireFightingIOT/device/getVideoStream", {
        number,
      }).then((res) => {});
    },
  },
  created() {
    this.getData();
  },
  activated() {},
  mounted() {
    this.startTimer();
    window.addEventListener("mousemove", this.resetTimer);
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器
    this.clearTimer();
    window.removeEventListener("mousemove", this.resetTimer);
  },
  destroyed() {
    //
  },
};
</script>
